<template>
  <div class="dashboard-container1">
    <vue-particles color="#212121" />
    <el-row style="justify-content: center; height: 100%;  overflow-x: auto; flex-direction: row;position:relative;z-index:999;">
      <el-col style="min-width: 400px;height: 100%; width: 1200px;">
        <el-card style="height: 100%;  overflow-y: auto;">
          <el-row>
            <el-col :span="11">
              <div class="tools-div" style="height: 770px;width: 520px">
                <div
                  style="margin-top: 150px"
                  id="myBingChart"
                  ref="myBingChart"
                  class="myBingChart"
                  :style="{ float: 'left', width: '560px', height: '300px'}"
                />
              </div>
            </el-col>
            <el-col :span="13">
              <div class="tools-div">
                <el-row style="margin-top:5px">
                  <el-col style="width: 50%">
                    <el-button size="mini" icon="el-icon-plus" type="primary" plain style="margin-left: 0px;" @click="addAsset(1)">新增资产</el-button>
                  </el-col>
                </el-row>
              </div>

              <div class="tools-div">
                <el-row style="width: 600px">
                  <el-table
                    :data="tableData"
                    :row-class-name="tableRowClassName"
                  >
                    <el-table-column
                      width="35"
                    >
                      <template slot-scope="scope">
                        <svg class="iconAsset2" aria-hidden="true">
                          <use :xlink:href="scope.row.icon" />
                        </svg>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="typeName"
                      label="类型"
                      width="120"
                    />
                    <el-table-column
                      prop="assetNumber"
                      label="资产价值"
                      width="90"
                    />
                    <el-table-column
                      prop="createTime"
                      label="时间"
                    />
                    <el-table-column>
                      <template slot-scope="scope">
                        <el-button size="mini" icon="el-icon-edit" round @click="upTableAsset(scope.row)">修改</el-button>
                        <el-button size="mini" icon="el-icon-delete" round @click.native="deleteTable(scope.row.id)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div>
                    <el-pagination
                      v-if="total>10"
                      background
                      style="margin-left: 220px;"
                      :current-page="searchLabel.page"
                      :page-size="searchLabel.pageSize"
                      layout="total, prev, pager, next"
                      :total="totalAsset"
                      @current-change="handleCurrentChange"
                    />
                  </div>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="资产选择" width="60%" :visible.sync="outerVisible">
      <el-button size="mini" @click="back"><i class="el-icon-back" />返回上一级</el-button>
      <el-row style="margin-top: 5px">
        <el-table
          :data="assetList"
          border
          style="width: 100%"
        >
          <el-table-column label="序号" width="70" align="center">
            <template slot-scope="scope">
              {{ (searchLabelModel.page - 1) * searchLabelModel.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="图标" width="65">
            <template slot-scope="scope">
              <svg class="iconAsset1" aria-hidden="true">
                <use :xlink:href="scope.row.icon" />
              </svg>
            </template>
          </el-table-column>
          <el-table-column
            prop="assetName"
            label="资产类型/名称"
            width="180"
          />
          <el-table-column
            prop="type"
            label="类型"
            width="100"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type==0" size="mini" effect="dark">分类</el-tag>
              <el-tag v-if="scope.row.type==1" size="mini" type="success" effect="dark">标签</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="scope.row.type !== 2 && scope.row.type!==0" type="success" icon="el-icon-plus" size="mini" title="新增资产" @click="add(scope.row.id)" />
              <el-button v-if="scope.row.type==0" type="primary" icon="el-icon-baseball" size="mini" title="进入详情" @click="adminLabel(scope.row.id)" />
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="block">
        <el-pagination
          :current-page="searchLabelModel.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchLabelModel.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChangeAsset"
        />
      </div>
      <el-dialog
        width="30%"
        title="新增资产"
        :visible.sync="innerVisible"
        append-to-body
        @open="onOpen"
        @close="onClose"
      >
        <el-form ref="assetEntityForm" :model="assetEntity" :rules="labelRules" size="medium" label-width="60px">
          <el-form-item label="价值" prop="assetNumber">
            <el-input v-model="assetEntity.assetNumber" placeholder="请输入资产价值" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button size="mini" @click="close">取消</el-button>
          <el-button size="mini" type="primary" @click="handelConfirm">确定</el-button>
        </div>
      </el-dialog>
    </el-dialog>

    <el-dialog
      width="30%"
      title="修改资产"
      :visible.sync="innerVisible2"
      append-to-body
      @open="onOpen"
      @close="onClose"
    >
      <el-form ref="assetEntityForm" :model="assetEntityUp" :rules="labelRules" size="medium" label-width="60px">
        <el-form-item label="价值" prop="assetNumber">
          <el-input v-model="assetEntityUp.assetNumber" placeholder="请输入资产价值" clearable :style="{width: '100%'}" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="close">取消</el-button>
        <el-button size="mini" type="primary" @click="updateById()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tallyFinancial from '@/api/tally/tallyFinancial'
import * as echarts from 'echarts'
import assetTypeApi from '@/api/tally/assetTypeApi'
import assetInfo from '@/api/tally/assetInfo'

export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: [],
      searchLabel: {
        page: 1,
        pageSize: 10
      },
      assetEntity: {},
      assetEntityUp: {},
      assetList: [],
      total: 0,
      bingData:[],
      totalAsset: 0,
      outerVisible: false,
      innerVisible: false,
      innerVisible2: false,
      searchLabelModel: {
        page: 1,
        pageSize: 10,
        isDefault: 0,
        name: '',
        desc: '',
        parentId: 0
      },
      labelRules: {
        assetNumber: [{
          required: true,
          message: '请输入价值',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.getBingData()
    this.getAssetPageList()
    this.getBookList()
    this.getPageList()
  },
  methods: {
    // 新增资产
    add(id) {
      this.innerVisible = true
      this.assetEntity.assetTypeId = id
    },
    back() {
      this.searchLabelModel.parentId = 0
      assetTypeApi.getPage(this.searchLabelModel).then(response => {
        this.assetList = response.data.rows
        this.total = response.data.total
      })
    },
    adminLabel(data) {
      this.searchLabelModel.parentId = data
      assetTypeApi.getPage(this.searchLabelModel).then(response => {
        this.assetList = response.data.rows
        this.total = response.data.total
      })
    },
    getPageList() {
      assetTypeApi.getPage(this.searchLabelModel).then(response => {
        this.assetList = response.data.rows
        this.total = response.data.total
      })
    },
    handleCurrentChangeAsset(val) {
      this.searchLabelModel.page = val
      this.getPageList()
    },
    addAsset() {
      this.outerVisible = true
      this.getPageList()
    },
    handleCurrentChange(val) {
      this.searchLabel.page = val
      this.getPage()
    },
    getEcharts() {
      this.getBingData()
    },
    myBingChart() {
      const option = {
        title: {
          text: '资产概览',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.bingData.label,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      const myBingChart = echarts.init(this.$refs.myBingChart, '')// 图标初始化
      myBingChart.setOption(option)// 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myBingChart.resize()
      })
    },
    /** ********************用户自定义标签标签修改****************************/
    deleteTable(id) {
      this.$confirm('此操作将永久删除该资产, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        assetInfo.removeById(id).then(response => {
          this.getAssetPageList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    onOpen() {},
    onClose() {
      this.$refs['assetEntityForm'].resetFields()
      this.assetEntity.assetNumber = ''
    },
    close() {
      this.innerVisible = false
      this.innerVisible2 = false
      this.$emit('update:visible', false)
      this.assetEntity.assetNumber = ''
    },
    handelConfirm() {
      this.$refs['assetEntityForm'].validate(valid => {
        if (valid) {
          assetInfo.add(this.assetEntity).then(response => {
            this.close()
          })
        }
      })
    },
    getAssetPageList() {
      assetInfo.getPage(this.searchLabel).then(response => {
        this.tableData = response.data.rows
        this.totalAsset = response.data.total
      })
    },
    upTableAsset(data) {
      this.innerVisible2 = true
      this.assetEntityUp = data
    },
    updateById() {
      assetInfo.updateById(this.assetEntityUp).then(response => {
        this.innerVisible2 = false
        this.getAssetPageList()
      })
    },
    getBingData() {
      assetInfo.getBing().then(response => {
        this.bingData = response.data
        this.myBingChart()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.iconAsset1{
  width: 2.3em;
  height: 2.3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.iconAsset2{
  width: 1.8em;
  height: 1.8em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

::v-deep .el-dialog__body {
  padding: 20px;
}
::v-deep .dialogForm .form-outer {
  padding: 10px 10px;
  .form-inner {
    padding: 0;
  }
}

#particles-js{
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;   //设置absolute,其他DIV设置为relative，这样这个例子效果就作为背景
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.dashboard-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  justify-content: center;
  position: absolute;
  background-size: cover;
  background-color: #99dee9;
}

.dashboard-container1 {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #99dee9;
}
.tools-div {
  margin-top: 5px;
  padding: 5px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  width: 610px;
}
</style>
